<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    border
    style="width: 100%;margin-top: 20px;">
    <el-table-column
      prop="id"
      label="产品编号"
      width="80"
      align="center">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      align="center"
      :filters="[{text: '2022-10-01', value: '2022-10-01'}, {text: '2022-10-02', value: '2022-10-02'}, {text: '2022-10-03', value: '2022-10-03'}, {text: '2022-10-04', value: '2022-10-04'}]"
      :filter-method="filterHandler"
    >
   
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      align="center"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="sale"
      label="购入量(件)"
      align="center"
      width="130">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      align="center"
      :filters="[{ text: '新访客', value: '新访客' }, { text: '老访客', value: '老访客' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '新访客' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  </template>
  
  <script>
    export default {
      data() {
        return {
          id:0,
          tableData: [
            {
            id:1,
            date: '2022-10-02',
            name: '王小虎',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          }, {
            id:2,
            date: '2022-10-04',
            name: '张三',
            address: '广东省汕头市潮阳区文光街道柳园路',
            tag:'老访客',
            sale:'7232',
            text: '2022-10-01', value: '2022-10-01'
          }, {
            id:3,
            date: '2022-10-01',
            name: '李四',
            address: '江西省宜春市袁州区珠泉街道城南怡欣花园二期',
            tag:'老访客',
            sale:'6312',
            text: '2022-10-01', value: '2022-10-01'


          }, {
            id:4,
            date: '2022-10-03',
            name: '王五',
            address: '福建省泉州市惠安县山霞镇大淡村146',
            tag:'新访客',
            sale:'1295',
            text: '2022-10-01', value: '2022-10-01'
          },
          {
            id:5,
            date: '2022-10-02',
            name: '胡瑞',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          },
          {
            id:6,
            date: '2022-10-02',
            name: '李八',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          },{
            id:7,
            date: '2022-10-02',
            name: '康7',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          },
          {
            id:8,
            date: '2022-10-02',
            name: '张琪',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          },
          {
            id:9,
            date: '2022-10-02',
            name: '中科',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          },
          {
            id:10,
            date: '2022-10-02',
            name: '黄克',
            address: '江苏省扬州市高邮市郭河路1022',
            tag:'新访客',
            sale:'4295',
            text: '2020-10-01', 
            value: '2020-10-01'
          }]
        }
      },
      methods:{
        getRandom(){
          const random = Math.random();
          console.log(random);
        },
        formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
      },
      mounted(){
        this.getRandom()
      }
    }
  </script>